@require('./variables.styl')

.k-slider
    position relative
    outline none
    display inline-block
    width 100%
    .k-slider-wrapper
        margin $slider-margin
        .k-wrapper
            height $slider-height
            background-color $slider-bg-color
            border-radius $slider-border-radius
            cursor pointer
            position relative
            user-select none
        .k-box
            padding $slider-box-padding
            :last-child
                float right
        .k-bar
            background-color $slider-bar-color
            position absolute
            height 100%
            border-radius $slider-border-radius
            transition all $transition 
        .k-handle
            height $slider-handle-height
            width $slider-handle-width 
            position absolute
            top 50%
            margin-top s('-%s', $slider-handle-height / 2)
            margin-left s('-%s', $slider-handle-width / 2)
            text-align center
            transition all $transition 
            border $slider-handle-border 
            border-radius $slider-handle-border-radius 
            background-color $slider-handle-bg-color 
            transition all $transition 
            outline none
            z-index 1
            &:hover
            &:focus
                transform $slider-handle-hover-transform 
                cursor grab
                background-color $slider-handle-hover-bg-color 

    &.k-show-input
        .k-slider-wrapper
            margin-right $slider-spinner-width

    .k-spinner-wrapper
        position absolute
        top 0
        right 0

    &.k-dragging
        .k-bar
            transition none
        .k-handle
            transition none
            &.k-active
                cursor grabbing
                transform $slider-handle-hover-transform 
                background-color $slider-handle-hover-bg-color 

    &.k-disabled
        .k-wrapper
            cursor not-allowed
        .k-bar
            background-color $slider-disabled-color
        .k-handle
            border-color $slider-disabled-color
            &:hover
            &:focus
                background-color $slider-handle-disabled-bg-color
                cursor not-allowed
                transform none

    // stop point
    .k-point
        position absolute
        top 0
        width $slider-stop-point-width
        height $slider-stop-point-height
        background $slider-stop-point-bg-color
        margin-left -(@width / 2)

    // marks
    .k-marks
        position relative
        height $slider-marks-height
        > span
            position absolute
            transform translateX(-50%) 
            white-space nowrap
            padding $slider-box-padding 
            cursor pointer
            &:first-child
                transform none
            &:last-child
                transform translateX(-100%)

requireTheme('slider')
